<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ page session="false"%>
<!DOCTYPE html>
<html lang="es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=800, user-scalable=no" />
        <!-- Choose highest mode available for IE -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="stylesheet" type="text/css" href="css/fontGob.css">
        <link rel="stylesheet" type="text/css" href="css/style3.css">
        <link rel="stylesheet" type="text/css" href="css/mapaTiempoReal.css">
        <link rel="stylesheet" type="text/css" href="css/csspinner.css">

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="js/table_floating_header.js"></script>
        <script type="text/javascript" src="js/animacion.js"></script>
        <script type="text/javascript" src="js/config_map_1_1.js"></script>
    </head>
    <body>
        <div class="hidden" itemscope itemtype="http://data-vocabulary.org/Organization">
        </div>
        <div class="controlesMapa" id="controlesMapaId" onclick="addClass(this, 'active')">
            <div id="loading"></div>
            <form>
                <div>
                    <span class="hasHelp"><span><p>Permite visualizar el estado de un determinado agente para las estaciones disponibles.</p><p>En caso de seleccionar <span class="destacado">todos los agentes</span> se visualizará la peor condición dentro de los parámetros disponibles para cada estación.</p></span></span>
                    <label for="parametro">Parámetro</label>
                    <select name="parametro" id="parametro">
                        <option value="FULL" selected="selected">Todos los  agentes</option>
                        <option value="PM10">Material particulado respirable (MP  10)</option>
                        <option value="PM25">Material particulado respirable  fino (MP 2,5)</option>
                        <option value="0008">Ozono (O<sub>3</sub>)</option>
                        <option value="0001">Dióxido de azufre (SO<sub>2</sub>)</option>
                        <option value="0003">Dióxido de nitrógeno (NO<sub>2</sub> )</option>
                        <option value="0004">Monóxido de carbono (CO)</option>
                    </select>
                </div>
                <div>
                    <span class="hasHelp">
                        <span>
                            <p>Filtra el listado de estaciones a presentar según el estado actual de estas considerando el filtro de parámetros seleccionados.</p>
                        </span>
                    </span>
                    <label>Condici&oacute;n de Calidad del Aire</label>
                </div>
                <div>
                    <div class="toggle option1">
                        <label for="condiciones[1]" class="observe">Bueno</label>
                        <input type="checkbox" name="condiciones[1]" id="condiciones[1]" checked="checked" onchange="actualizacionEstaciones()">
                        <span class="btn"></span>
                        <span class="labels"></span>
                        <span class="bg"></span>
                    </div>
                    <div class="break"></div>
                </div>
                <div>
                    <div class="toggle option2">
                        <label for="condiciones[2]" class="observe">Regular</label>
                        <input type="checkbox" name="condiciones[2]" id="condiciones[2]" checked="checked" onchange="actualizacionEstaciones()">
                        <span class="btn"></span>
                        <span class="labels"></span>
                        <span class="bg"></span>
                    </div>
                    <div class="break"></div>
                </div>
                <div>
                    <div class="toggle option3">
                        <label for="condiciones[3]" class="observe">Alerta</label>
                        <input type="checkbox" name="condiciones[3]" id="condiciones[3]" checked="checked" onchange="actualizacionEstaciones()">
                        <span class="btn"></span>
                        <span class="labels"></span>
                        <span class="bg"></span>
                    </div>
                    <div class="break"></div>
                </div>
                <div>
                    <div class="toggle option4">
                        <label for="condiciones[4]" class="observe">Preemergencia</label>
                        <input type="checkbox" name="condiciones[4]" id="condiciones[4]" checked="checked" onchange="actualizacionEstaciones()">
                        <span class="btn"></span>
                        <span class="labels"></span>
                        <span class="bg"></span>
                    </div>
                    <div class="break"></div>
                </div>
                <div>
                    <div class="toggle option5">
                        <label for="condiciones[5]" class="observe">Emergencia</label>
                        <input type="checkbox" name="condiciones[5]" id="condiciones[5]" checked="checked" onchange="actualizacionEstaciones()">
                        <span class="btn"></span>
                        <span class="labels"></span>
                        <span class="bg"></span>
                    </div>
                    <div class="break"></div>
                </div>
                <div>
                    <span class="hasHelp">
                        <span>
                            <p>Permite concentrar la visualización del mapa en uno de los departamentos del Per&uacute;.</p>
                            <p>No filtra estaciones a nivel nacional, solo modifica la vista actual del mapa.</p>
                        </span>
                    </span>
                    <label for="region">Departamento</label>
                    <select name="region" id="region" onchange="cambiarVista(this)">
                        <option value="0">Amazonas</option>
                        <option value="1">Ancash</option>
                        <option value="2">Apurimac</option>
                        <option value="3">Arequipa</option>
                        <option value="4">Ayacucho</option>
                        <option value="5">Cajamarca</option>
                        <option value="6">Callao</option>
                        <option value="7">Cusco</option>
                        <option value="8">Huancavelica</option>
                        <option value="9">Huanuco</option>
                        <option value="10">Ica</option>
                        <option value="11">Junin</option>
                        <option value="12">La Libertad</option>
                        <option value="13">Lambayeque</option>
                        <option value="14">Lima</option>
                        <option value="15">Loreto</option>
                        <option value="16">Madre de Dios</option>
                        <option value="17">Moquegua</option>
                        <option value="18">Pasco</option>
                        <option value="19">Piura</option>
                        <option value="20">Puno</option>
                        <option value="21">San Martin</option>
                        <option value="22">Taca</option>
                        <option value="23">Tumbes</option>
                        <option value="24">Ucayali</option>
                    </select>
                </div>
                <div>
                    <span class="hasHelp">
                        <span>
                            <p>Habilitado permite la actualizaci&oacute;n autom&aacute;tica de los estados de estaci&oacute;n<span class="destacado" id="secondsToUpdate"></span>.</p>
                        </span>
                    </span>
                    <label for="actualizaEstaciones">Actualización automática</label>
                    <div class="toggle">
                        <input type="checkbox" name="actualizaEstaciones" id="actualizaEstaciones" checked="checked" onchange="switchUpdate()">
                        <span class="btn"></span>
                        <span class="labels"></span>
                        <span class="bg"></span>
                    </div>
                    <div class="break"></div>
                </div>
            </form>
        </div>
        <div class="mapaTiempoReal withborder" id="mapaNacional"></div>
        <!-- <div id="legend">
          <ul>
            <li><span class="boxLegend" style="background-color:#2eae00;"></span> bueno</li>
            <li><span class="boxLegend" style="background-color:#f5e23d;"></span> regular</li>
            <li><span class="boxLegend" style="background-color:#f5713d;"></span> alerta</li>
            <li><span class="boxLegend" style="background-color:#f52424;"></span> preemergencia</li>
            <li><span class="boxLegend" style="background-color:#b33df5;"></span> emergencia</li>
            <li><span class="boxLegend" style="background-color:#006cb7;"></span> preliminar</li>
            <li><span class="boxLegend" style="background-color:#b4b4b4;"></span> no disponible</li>
          </ul>
        </div> -->
    </body>
</html>
